<template>
	<view v-if="cardcontent.printid">
		<view class="cardview" :style="{ backgroundImage: bjimg1 }">
			<u-row gutter="16">
				<u-col :span="cardcontent.je3 ? 6 : 12">
					<view class="cardbox">
						<view class="title">
							{{ $z.$t("卡号") }}
						</view>
						<view class="">
							{{ cardcontent.printid }}
						</view>
					</view>
				</u-col>
				<u-col span="6" v-if="cardcontent.je3">
					<view class="cardbox">
						<view class="title">
							{{ $z.$t(cardcontent.jelabel3) }}
						</view>
						<view class="">
							{{ cardcontent.je3 }}
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="cardbox">
						<view class="title">
							{{ $z.$t(cardcontent.jelabel) }}
						</view>
						<view class="">
							{{ cardcontent.je }}
						</view>
					</view>
				</u-col>
				<u-col span="6" v-if="cardcontent.je2">
					<view class="cardbox">
						<view class="title">
							{{ $z.$t(cardcontent.jelabel2) }}
						</view>
						<view class="">
							{{ cardcontent.je2 }}
						</view>
					</view>
				</u-col>
			</u-row>
			<view class="cardtype">
				{{ $z.$t(cardcontent.label) }}
			</view>
			<view class="" style="height: 80rpx"></view>
			<view class="titmc" :style="{ backgroundImage: bjimg2 }">
				{{ $z.$t(titmc) }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		DataURLimg
	} from "@/config/index.js";
	export default {
		name: "cardlook",
		data() {
			return {
				bjimg1: `url('${DataURLimg}/kabj.png')`,
				bjimg2: `url('${DataURLimg}/kabj2.png')`,
				titmc: "",
			};
		},
		props: {
			Card: {
				type: Object,
				default: () => {},
			},
		},
		mounted() {
			this.getdata();
		},
		methods: {
			async getdata() {
				let titmc = await this.$store.dispatch("user/GetAppinfofn");

				this.titmc = titmc;
			},
		},
		computed: {
			cardcontent() {
				if (!this.Card.printid) {
					return {};
				}
				return this.$z.cardcontent(this.Card);
			},
		},
	};
</script>

<style lang="scss">
	/* url('http://img.gpsserver.cn:20080/wxhtml/img/kabj.png') */
	.cardview {
		/* height: 200rpx; */
		min-height: 340rpx;
		background-size: 120% 120%;
		background-position: center;
		position: relative;
		margin: 30rpx 20rpx;
	}

	.cardbox {
		color: #ffffff;
		font-size: 36rpx;
		padding: 20rpx 40rpx;
		padding-bottom: 0;
		line-height: 80rpx;

		.title {
			font-size: 32rpx;
			line-height: 50rpx;
		}
	}

	.cardtype {
		background: #ffffff;
		position: absolute;
		right: 0;
		top: 16px;
		padding: 6px 15px;
		border-top-left-radius: 40px;
		border-bottom-left-radius: 40px;
		color: #2093f5;
	}

	.titmc {
		height: 80rpx;
		background-color: #666;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
		font-size: 34rpx;
		background-size: 100% 100%;
		background-position: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
</style>